用現成的套件建置 react 環境遇到的問題

10/18 錯誤示範流程：

這次錯誤來自「沒有看清楚官網的指令」，而會發生的原因是「精神不濟」，改善方式為「設鬧鐘提醒自己，時間到就去洗澡睡覺」，即日起實施。

發現每次建置環境都留下每個步驟的紀錄是好事，隔天方便思考整個流程，以下為安裝紀錄：

這次終於記得要安裝在指定資料夾底下了

facebook/create-react-app - GitHub

step 1 $ npx create-react-app my-app，安裝要花一點時間

step 2 $ npm create-react-app -v 我的版本號是 7.21.1

step 3 $ npx create-react-app -V 4.0.3

安裝好以後，step 4 $ cd my-app，接著 step 5 $ npm run start，出現錯誤訊息一大串：

事後檢討：

先等一下！這時候第五個指令就錯了，應該是 $ npm start 而不是 $ npm run start，難怪會出現下面的錯誤訊息！

官網 寫得很清楚，下次要看仔細

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "^7.11.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

  /Users/christy/node_modules/eslint (version: 6.8.0) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/christy/node_modules/eslint is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls eslint in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

跟著上面的提示 debug，先做了下面兩個：

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.

但是找不到

1. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.

step 6 $ npm install，以後出現了一堆 deprecated 的東西，在跑 step 7 $ npm audit fix

然後再跑一次 step 8 $ npm install，發現 webpack 也有問題，最後跑 step 9 $ brew install yarn，等了好久，電腦都燒起來了。

有找到這個 NPM start returns error, "There might be a problem with the project dependency tree" 但是還是無法解決。

結果隔天把資料夾全部刪掉，再重來一次，就好了！這次我只花了七分鐘...昨天裝不好我學到的教訓，希望以後不會再犯。

這次總算學會「不執著」了，如果裝不好，就先繼續看課程，或是做其他的部分，我能夠學會這個思考模式真的太好了 😭 因為對以前的我來說，很難很難。